<template>
  <view class="flex-center margin-tb-20" style="text-align: center">
    <view v-for="(item, index) in list" :key="index" class="column-center flex-1 gap-8">
      <view :class="['text-34', { 'select-color': index === select }]" @click="tabSelect(index)">{{ item }}</view>
      <view :class="['tabs-line', { 'select-line': index === select }]"/>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      query: true,
    },
    select: {
      type: Number,
      default: 0
    }
  },
  methods: {
    tabSelect(index) {
      this.$emit('click', index);
    }
  }
}
</script>

<style scoped>
.select-color {
  color: #3c9cff;
}

.tabs-line {
  width: 0;
  margin: auto;
  margin-top: 4rpx;
  height: 8rpx;
  border-radius: 100rpx;
  transition: 0.25s;
  background-color: #3c9cff;
}

.select-line {
  width: 68rpx;
}
</style>